<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./js/vue.js"></script>

</head>

<body>

    <div id="app">
        <!-- 
            循环对象:
            - v-for 遍历对象
                - <div v-for='(value,key,index) in obj'> 
                    值,键,索引, 顺序固定,可以修改名称
            - v-if 和 v-for 结合使用
                - <div v-if='value==12' v-for='(value,key,index) in obj'>

        -->
        <div v-for='(value,key,index) in obj'>
            {{value+'---'+key+'---'+index}}
        </div>

        <div v-if='value==12' v-for='(value,key,index) in obj'>
            {{value+'---'+key+'---'+index}}
        </div>

    </div>

    <script type="text/javascript">
        // 使用原生JS遍历对象
        var obj = {
            uname: 'lisi',
            age: 12,
            gender: 'male'
        }
        for (let key in obj) {
            console.log(key, obj[key])
        }

        var vm = new Vue({
            el: '#app',
            data: {
                obj: {
                    uname: 'lisi',
                    age: 12,
                    gender: 'male'
                }
            }
        })

    </script>
</body>

</html>